<template>
	<view class="detailedInformation_box">
		<view class="detailed_status_box">
			<view class="bank_box">
				<image class="bank_img" :src="details.info.receiverBankLogo"></image>
				<view class="detailed_type">提现到{{details.info.receiverBankName.split(',')[0]}}(*****{{details.info.hBankAccount}})</view>
			</view>
			<view class="detailed_money" >¥{{details.info.amount}}</view>
		</view>
		<view class="detailed_detail">
			<view class="label_box">
				<text class="label_text">提现状态</text>
				<view class="value_box" v-if="details.info.tradeStatus==0||details.info.tradeStatus==1">待审核</view>
				<view class="value_box" v-if="details.info.tradeStatus==2">提现成功</view>
				<view class="value_box" v-if="details.info.tradeStatus==3">提现失败</view>
			</view>
			<view class="label_box">
				<text class="label_text">提现单号</text>
				<view class="value_box">
					<text class="order_no">{{details.info.id}}</text>
					<view class="copy_btn" @click="onCopy(details.info.id)">复制</view>
				</view>
			</view>
			<view class="label_box">
				<text class="label_text">提现时间</text>
				<view class="value_box">{{details.info.createTime}}</view>
			</view>
			<view class="label_box">
				<text class="label_text">提现银行</text>
				<view class="value_box">{{details.info.receiverBankName.split(',')[0]}}</view>
			</view>
			<view class="label_box">
				<text class="label_text">银行账号</text>
				<view class="value_box">{{details.info.receiverBankAccount}}</view>
			</view>
			<view class="label_box" v-if="details.info.tradeStatus!=0">
				<text class="label_text">审核时间</text>
				<view class="value_box">{{details.info.handleTime}}</view>
			</view>
			<view class="label_box" v-if="details.info.tradeStatus==3&&details.info.rejectReason">
				<text class="label_text">失败原因</text>
				<view class="value_box">{{details.info.rejectReason}}</view>
			</view>
		</view>

	</view>
</template>
<script setup lang="ts">
	import { reactive,onMounted } from 'vue';
	import { onLoad ,onReachBottom} from '@dcloudio/uni-app'
	import api from '@/api'
	let details = reactive<any>({
		id: '',
		info: {}
	})
	const getDateils = async () => {
		const res: any = await api({
			method: 'get',
			url: `/mall/studio/studio-balance-withdraw-record/${details.id}`,
		})
		details.info = res.data
		details.info.hBankAccount = details.info.receiverBankAccount.substring(details.info.receiverBankAccount.length-4)
	}
	const onCopy = (id) => {
		uni.setClipboardData({
			data: id
		})
	}
	onMounted(() => {
		getDateils()
	})
	onLoad((option) => {
		details.id = option.id
	})
</script>
<style scoped lang="scss">
	.bank_box {
		display: flex;
		justify-content: center;
		align-items: center;


	}

	.bank_img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 18rpx;
	}

	.detailedInformation_box {
		padding: 32rpx;
		box-sizing: border-box;

		.detailed_status_box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 48rpx 0;
			text-align: center;

			.detailed_type {
				font-weight: bold;
				font-size: 36rpx;
				color: #1A1A1A;
			}

			.detailed_money {
				font-weight: bold;
				font-size: 56rpx;
				color: #1B2120;
				margin-top: 48rpx;
			}

			.reduce_color {
				color: #6363FF;
			}
		}

		.detailed_detail {
			margin-top: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.label_box {
				display: flex;
				justify-content: space-between;
				margin-bottom: 48rpx;

				.label_text {
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
				}

				.value_box {
					display: flex;
					flex-direction: row;
					font-weight: 400;
					font-size: 28rpx;
					color: #1A1A1A;
					max-width: 420rpx;
					word-break: break-all;
					text-align: right;

					.order_no {}

					.copy_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 82rpx;
						height: 40rpx;
						background: var(--color-primary);
						border-radius: 38rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 8rpx;
					}
				}
			}

			.label_box:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>